<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :hideSelect="true"
      :form="form"
      :xLength="1800"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="所属店铺">
            <a-select
              style="width: 130px"
              :options="shopCategoryOptions"
              allowClear
              v-decorator="['shopCategory', {  initialValue: '0' }]"
              placeholder="选择所属店铺"
            />
          </a-form-item>
          <a-form-item label="类型">
            <a-select
              style="width: 130px"
              :options="typeOptions"
              v-decorator="['type']"
              placeholder="选择海报类型"
            />
          </a-form-item>
          <a-form-item label="海报/主图名称">
            <a-input
              style="width: 180px"
              v-decorator="['name']"
              placeholder="输入海报或主图名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="分类">
            <a-select
              style="width: 160px"
              :options="firstCategoryOptions"
              @change="firstCategoryChange"
              v-decorator="['firstPosterCategoryId']"
              placeholder="选择海报一级分类"
            />
          </a-form-item>
          <a-form-item label="">
            <a-select
              style="width: 160px"
              :options="secondCategoryOptions"
              v-decorator="['secondPosterCategoryId']"
              placeholder="选择海报二级分类"
            />
          </a-form-item>
          <a-form-item label="身份类型">
            <a-select
              style="width: 160px"
              :options="userIdTypeOptions"
              v-decorator="['userIdType']"
              placeholder="选择用户身份类型"
            />
          </a-form-item>
          <a-form-item label="店铺名称">
            <a-input
              style="width: 130px"
              v-decorator="['shopName']"
              placeholder="输入店铺名称"
            >
            </a-input>
          </a-form-item>
          <!-- <a-form-item label="海报文案">
            <a-input
              style="width: 130px"
              v-decorator="['copyContent']"
              placeholder="输入海报文案"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="文案分类">
            <a-select
              style="width: 140px"
              :options="copywritingCategoryOptions"
              v-decorator="['copywritingCategoryId']"
              placeholder="选择文案分类"
            />
          </a-form-item> -->
          <a-form-item label="操作终端">
            <a-select
              style="width: 140px"
              :options="terminalOptions"
              v-decorator="['terminal']"
              placeholder="选择操作终端"
            />
          </a-form-item>
          <a-form-item label="导购姓名">
            <a-input
              style="width: 130px"
              v-decorator="['userName']"
              placeholder="输入创建人姓名"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="导购账号">
            <a-input
              style="width: 130px"
              v-decorator="['userPhone']"
              placeholder="输入分享人姓名"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="用户角色">
            <a-input
              style="width: 130px"
              v-decorator="['roleName']"
              placeholder="输入角色名称"
            >
            </a-input>
          </a-form-item>
          <!-- <a-form-item label="查看时间">
            <fast-range-picker
              v-decorator="[
              'examineStartTime-examineEndTime',
            ]"
            >
            </fast-range-picker>
          </a-form-item> -->
          <a-form-item label="生成时间">
            <fast-range-picker
              v-decorator="[
              'buildStartTime-buildEndTime',
            ]"
            >
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>

      <template slot="ImgTextTable" slot-scope="{ record }">
        <div class="labels">
          <div v-for="(l, i) in record.labels" :key="i">
            {{ l.name }}
          </div>
        </div>
      </template>

      <template slot="sendStatusTable" slot-scope="{ record }">
        <a-switch
          :checked="record.sendStatus == 2"
          @change="sendStatusChange(record.id, $event, record)"
        />
      </template>
      <template slot="oprationRow">
        <a-button type="primary" icon="plus" @click="exportExcel()"
          >导出</a-button
        >
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <a
            href="javascript:;"
            class="text-primary pointer"
            @click="previewRecord(record)"
            >预览
          </a>
        </a-space>
      </template>
    </search-table>
    <!-- 预览 -->
    <PosterPreview 
      :visible="isPreview" 
      :posterData="posterInfo" 
      :isShareRecord="true"
      @cancel="isPreview = false">
    </PosterPreview>
    <!-- 分享次数详情列表 -->
    <ShareCount
      :visible="isShareCount" 
      :posterId="posterId" 
      @cancel="isShareCount = false">
    </ShareCount>
  </div>
</template>

<script>
import PosterPreview from '../upload/components/PosterPreview'
import ShareCount from './components/ShareCount'
export default {
  name: "GalleryPosterShareRecord",
  components: {
    PosterPreview,
    ShareCount
  },
  data() {
    return {
      url: 'goldenhome/gh/poster_admin/poster/record/page',
      form: this.$form.createForm(this, { name: "table_search" }),
      columns: [
        {
          title: "海报缩略图",
          dataIndex: "imgsUrl",
          key: "imgsUrl",
          align: "center",
          width: '120px',
          customRender: (text, row) => {
            return <table-img src={text} />;
          },
        },
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          align: "center",
          customRender: (text, row) => {
            if(text == 1) {
              return '上传海报'
            }else if(text == 2) {
              return '模板海报'
            }else {
              return '自主创建'
            }
          },
        },
        {
          title: "海报/主图名称",
          dataIndex: "name",
          key: "name",
          align: "center",
          width: '140px'
        },
        {
          title: "海报一级分类",
          dataIndex: "firstPosterCategoryName",
          key: "firstPosterCategoryName",
          align: "center",
          width: '120px'
        },
        {
          title: "海报二级分类",
          dataIndex: "secondPosterCategoryName",
          key: "secondPosterCategoryName",
          align: "center",
          width: '120px'
        },
        // {
        //   title: "海报文案",
        //   dataIndex: "copyContent",
        //   key: "copyContent",
        //   align: "center"
        // },
        // {
        //   title: "文案分类",
        //   dataIndex: "copywritingCategoryName",
        //   key: "copywritingCategoryName",
        //   align: "center"
        // },
        {
          title: "所属机构",
          dataIndex: "orgName",
          key: "orgName",
          align: "center"
        },
        {
          title: "店铺名称",
          dataIndex: "shopName",
          align: "center",
          key: "shopName"
        },
        {
          title: "导购姓名",
          dataIndex: "userName",
          align: "center",
          key: "userName"
        },
        {
          title: "导购账号",
          dataIndex: "userPhone",
          align: "center",
          key: "userPhone",
          width: '130px'
        },
        {
          title: "身份类型",
          dataIndex: "userIdType",
          align: "center",
          key: "userIdType"
        },
        {
          title: "用户角色",
          dataIndex: "roleName",
          align: "center",
          key: "roleName"
        },
        // {
        //   title: "查看时间",
        //   dataIndex: "buildTime",
        //   key: "buildTime",
        //   align: "center"
        // },
        {
          title: "创建时间",
          dataIndex: "buildTime",
          key: "buildTime",
          align: "center"
        },
        {
          title: "操作终端",
          dataIndex: "terminal",
          key: "terminal",
          align: "center"
        },
        {
          title: "分享次数",
          dataIndex: "shareAmount",
          key: "shareAmount",
          align: "center",
          customRender: (text, record) => {
            return (
              <a href="javascript:;" onClick={() => {this.shopShareRecordList(record, text)}}>
                {text}
              </a>
            );
          },
        },
        {
          title: "操作",
          dataIndex: "operation",
          fixed: "right",
          scopedSlots: { customRender: "operation" },
        },
      ],
      shopCategoryOptions: [
        {label: '本店', value: '0'},
        {label: '其他店', value: '1'}
      ],
      typeOptions: [
        {label: '上传海报', value: '1'},
        {label: '模板海报', value: '2'},
        {label: '自主创建', value: '3'}
      ],
      firstCategoryOptions: [],
      secondCategoryInfo: {},
      secondCategoryOptions: [],
      userIdTypeOptions: [
        // 1店长2店员3供应商4分销商5设计师
        {label: '店长', value: '1'},
        {label: '店员', value: '2'},
        {label: '供应商', value: '3'},
        {label: '分销商', value: '4'},
        {label: '设计师', value: '5'}
      ],
      terminalOptions: [
        {label: 'IOS', value: 'IOS'},
        {label: 'Android', value: 'Android'}
      ],
      statusOptions: [
        {label: '未生效', value: '1'},
        {label: '生效中', value: '2'},
        {label: '已过期', value: '3'}
      ],
      posterInfo: {},
      isPreview: false,
      isShareCount: false,
      posterId: ""
    };
  },
  created() {
    this.getCategoryList()
  },
  methods: {
    exportExcel(){
      this.$refs.searchtable.getFormValues().then((values) => {
        if(!values.shopCategory){
          this.$message.warning('请选择所属店铺');
          return false
        }
        const params = {
          ...values,
          current: this.$refs.searchtable.current,
          size: this.$refs.searchtable.size
        }
        this.$export('goldenhome/gh/poster_admin/poster/record/export', params, true);
      })
    },
    //一级分类改变
    firstCategoryChange(value) {
      this.form.resetFields("secondPosterCategoryId");
      if(!this.secondCategoryInfo[value] || this.secondCategoryInfo[value].length == 0) return this.secondCategoryOptions = [];
      this.secondCategoryOptions = this.secondCategoryInfo[value].map(item => { //获取当前选择一级分类下二级分类
        return {
          label: item.name,
          value: item.id
        }
      })
    },
    // 获取分类
    async getCategoryList() {
      const res = await this.$get("goldenhome/gh/poster_admin/poster/category/list", {
        // source: 1 //海报来源 1上传海报，2模板海报 
      });
      if(res && res.returnCode == 1000) {
        this.firstCategoryOptions = res.dataInfo.map(item => {
          return {
            label: item.name,
            value: item.id
          }
        });
        res.dataInfo.forEach(item => {
          this.secondCategoryInfo[item.id] = item.children;
        });
      }
    },
    // 展示分享列表
    shopShareRecordList(record, text) {
      this.posterId = record.id;
      if(text == 0) return;
      this.isShareCount = true;
    },
    // 获取海报详情
    async posterInfoRequest(params) {
      const res = await this.$get("goldenhome/gh/poster_/admin/poster/record/id", params);
      if(res && res.returnCode == 1000) {
        return res.dataInfo
      }else {
        return {}
      }
    },
    // 预览
    async previewRecord(record) {
      let id = record.id; //海报id
      this.posterInfo = await this.posterInfoRequest({id});
      this.isPreview = true;
    }
  }
}
</script>

<style scoped lang="less">
</style>
